<template>
    <div class="p-picker-range">
        <v-field
            type="select"
            v-model="currentValue"
            :options="options"
            :placeholder="$t('lang.pleaseSelect')"
            @change="handleChange"
        />
        <i class="icon icon-target" :class="[isCurrent ? 'current' : '']" @click="handlePicker" />
    </div>
</template>

<script>
import * as api from '../core/api.js';
import * as Chef from '../core/Chef.js';
import * as enums from '../store/status-enums.js';
import { mapState } from 'vuex';
import bus from '../utils/Eventbus.js';
import vField from '../utils/v-field.vue';
import i18n from '../lang/index.js';
const $t = i18n.global.t;
/**
 * p-picker-range
 * @author wangdasong
 * @date 20230130
 */
export default {
    name: 'p-picker-range',
    props: {
        value: {
            // eslint-disable-next-line vue/require-prop-type-constructor
            type: [String, Number],
            default: ''
        }
    },
    components: { vField },
    data() {
        return {
            currentValue: this.value,
            options: [],
            isCurrent: false
        };
    },
    computed: {
        ...mapState({
            openedBoxes: state => state.businessStatus.openedBoxes,
            selectedRanges: state => state.businessStatus.selectedRanges
        })
    },
    watch: {
        value(val) {
            this.currentValue = val;
        },
        currentValue(val) {
            // console.log('p-picker-range.watch.currentValue: ');
            this.$store.commit(enums.DESELECT_RANGES_ALL, [val]);
            this.$emit('input', val);
        },
        selectedRanges(val) {
            if (!val || !val.length || !this.isCurrent) return;
            this.currentValue = val[0];
        }
    },
    created() {
        bus.on(`${this.$options.name}.clear`, this.clear);
    },
    mounted() {
        // this.$store.commit(enums.OPEN_BOX, 'pathsTable');
        this.init();
    },
    beforeDestroy() {
        bus.off(`${this.$options.name}.clear`, this.clear);
        this.clear();
    },
    methods: {
        async init() {
            // console.log('p-picker-range.init: ', this);
            let op = { label: $t('lang.pleaseSelect'), value: '', hidden: true };
            this.clear();
            let res = await api.getLocalResources('ranges');
            if (!res || !res.list || !res.list.length) return;
            this.options = Chef.getRangesOptions(res.list);
            this.options.unshift(op);
            // this.options.unshift({ label: $t('lang.pick'), value: -1 });
        },
        clear() {
            // console.log('p-picker-range.clear: ', this.currentValue);
            this.isCurrent = false;
            this.$store.commit(enums.DESELECT_RANGES, [this.currentValue]);
        },
        handleChange(val) {
            bus.emit('p-painter-contours.locateRange', val);
        },
        handlePicker() {
            let c = this.isCurrent;
            bus.emit('p-picker-vehicle.clear');
            bus.emit('p-picker-path.clear');
            bus.emit(`${this.$options.name}.clear`);
            this.isCurrent = !c;
            if (this.isCurrent) this.$store.commit(enums.OPEN_BOX, 'rangesTable');
            else {
                this.clear();
                this.$store.commit(enums.CLOSE_BOX, 'rangesTable');
            }
        }
    }
};
</script>

<style rel="stylesheet/scss" lang="scss">
.p-picker-range {
    width: 100%;
    display: flex;
    .v-field {
        width: calc(100% - 30px);
    }
    .icon-target {
        flex: 1 1 auto;
        cursor: pointer;
        font-size: 18px;
        line-height: 22px;
        text-align: center;

        &.current {
            color: #ff0000;
            animation: blinker 500ms linear infinite;
        }
        @keyframes blinker {
            50% {
                opacity: 0.8;
                text-shadow: 0 0 6px #b54434;
            }
        }
    }

    select {
        height: 22px;
        font-size: 12px;
        line-height: 22px;
        padding: 2px 3px;
        border-radius: 4px;
        border: 1px solid #dcdfe6;
        background: #ffffff;
    }
}
</style>
